<template>
    <view>
        <view style="padding: 15rpx;background-color: white">
            <view class="form" style="margin-top: 10px">
                <view v-for="(item, index) in item_list" :key="index" class="item">
                    <view class="label">{{ item.name }}</view>
                    <view v-if="item.type == '1'">
                        <input v-model="form_data[item.identity]" type="text" @input="inputChange($event, item.identity)" class="smt-input" />
                    </view>
                    <view v-if="item.type == '5'">
                        <uni-file-picker v-model="tempFilePaths[item.identity]" fileMediatype="image" mode="grid" limit="1" @select="selectImg($event, item.identity)" @progress="progress($event, item.identity)"
                            @success="success($event, item.identity)" @fail="fail($event, item.identity)" @delete="deleteImg($event, item.identity)" :image-styles="imageDisplayStyles" />
                    </view>
                </view>
            </view>
            <view style="padding-top: 15rpx">
                <button :style="{backgroundColor: theme.color}" style="color: white" @click="submit">提交</button>
            </view>
        </view>
    </view>
</template>

<script>
import { url } from '@/common/js/url'
import { list as itemList } from '@/cms/api/form/item'
import { submit as formSubmit } from '@/cms/api/form/form'

import { uniFilePicker } from '@/components/uni-ui/uni-file-picker/uni-file-picker'

export default {
    components: { uniFilePicker },
    data() {
        return {
            theme: {},
            item_list: [],
            form_data: {},
            tempFilePaths: {}
        }
    },
    created() {
        this.theme = {
            color: '#F27931'
        }
        itemList().then(res => {
            this.item_list = res.data.items
            this.item_list.forEach(element => {
                if (element.type == '5') {
                    this.tempFilePaths = Object.assign(this.tempFilePaths, {
                        [element.identity]: []
                    })
                    this.form_data = Object.assign(this.form_data, {
                        [element.identity]: ''
                    })
                } else {
                    this.form_data = Object.assign(this.form_data, {
                        [element.identity]: ''
                    })
                }
            })
        })
    },
    methods: {
        inputChange(e, identity) {
            this.form_data[identity] = e.detail.value
        },
        selectImg(e, identity) {
            this.tempFilePaths[identity] = e.tempFilePaths
        },
        progress(e, identity) {

        },
        success(e, identity) {

        },
        fail(e, identity) {

        },
        deleteImg(e, identity) {

        },
        submit() {
            let submitable = true
            this.item_list.forEach(element => {
                if (element.type == '1' && (this.form_data[element.identity] === null || this.form_data[element.identity] === '' || this.form_data[element.identity] === undefined)) {
                    uni.showToast({
                        title: '请输入' + element.name + '!',
                        icon: 'none'
                    })
                    submitable = false
                } else if (element.type == '5' && this.tempFilePaths[element.identity].length == 0) {
                    uni.showToast({
                        title: '请上传' + element.name + '!',
                        icon: 'none'
                    })
                    submitable = false
                }
            })
            if (submitable) {
                let to_upload = []
                this.item_list.forEach(element => {
                    if (element.type == '5') {
                        to_upload.push(new Promise((resolve, reject) => {
                            uni.showLoading({
                                title: '上传图片' + element.name
                            });
                            uni.uploadFile({
                                url: url('/upload/image'), //仅为示例，非真实的接口地址
                                filePath: this.tempFilePaths[element.identity][0],
                                name: 'file',
                                success: (uploadFileRes) => {
                                    const result = JSON.parse(uploadFileRes.data)
                                    this.form_data[element.identity] = result.data.file_name
                                    resolve(result.data.file_name)
                                },
                                fail: (res) => {
                                    console.log(res)
                                }
                            });
                        }))
                    }
                })
                Promise.all(to_upload).then(res => {
                    uni.hideLoading()
                    formSubmit(this.form_data).then(res => {
                        if(res.errorCode == 200) {
                            uni.showModal({
                                content: '提交成功',
                                showCancel: false,
                                success: res => {
                                    if(res.confirm) {
                                        uni.navigateBack()
                                    }
                                }
                            })
                        } else {
                            uni.showModal({
                                content: '提交失败',
                                showCancel: false
                            })
                        }
                    })
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
.form {
    background-color: white;

    .item {
        padding: 10px 20upx 10px 0upx;

        .label {
            padding-bottom: 15rpx;
        }

        .smt-input {
            padding: 10rpx;
            border: 1px #d8d8d8 solid;
            border-radius: 15rpx;
        }
    }
}
</style>